<template>
    <div class="generalization">
        <div class="ge_box">
            <div class="erweima">
                <img id="imgshow" ref="imgshow" src="/apis/wx" alt="">
            </div>
            <div class="btm">
                <p class="gename" v-html="gename"></p>
                <p class="gephone" v-html="gephone"></p>
                <div class="ge_list">
                    <div class="iconbox"><img src="../img/icon1.png" alt=""></div>
                    <div class="text"><span>已注册:{{zcrs}}人</span><span>本月已注册:{{byzcrs}}人</span></div>
                </div>
                <div class="ge_list">
                    <div class="iconbox"><img src="../img/icon2.png" alt=""></div>
                    <div class="text"><span>已关注:{{gzrs}}人</span><span>本月已关注:{{bygzrs}}人</span></div>
                </div>
                <!--<div class="ge_list">-->
                    <!--<div class="iconbox"><img src="../img/icon3.png" alt=""></div>-->
                    <!--<div class="text"><span>取消关注:{{zhuperson}}人</span><span>本月已取消关注:{{zhumonth}}人</span></div>-->
                <!--</div>-->
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        data: function () {
            return {
                erweima: '',
                //erweima: require('../img/erweima.png'),
                gename: '',
                gephone: '',
                zcrs: 0,
                byzcrs: 0,
                imgoff:false,
                gzrs:0,
                bygzrs:0
            }
        },
        mounted() {
           this.checklogout();
           this.getperson();
           this.checkerweimaheight();
        },
        name: "generalization",
        methods: {
            checklogout(){
                this.axios({
                    method: 'get',
                    url: this.common.baseURL+'/wx',
                    data: {},
                }).then((response) => {
                    this.common.loginCheak(this,response.data.code);//检测用户信息是否失效
                }).catch((error) => {
                });
            },
            getperson(){
                this.axios({
                    method: 'get',
                    url: this.common.baseURL+'/wx/getTgInfo',
                    data: {},
                }).then((response) => {
                    console.log(response)
                    let res = response.data.data;
                    console.log(res)
                    this.gename = res.name
                    this.gephone = res.mobile
                    this.zcrs = res.zcrs
                    this.byzcrs = res.byzcrs
                    this.gzrs = res.gzrs
                    this.bygzrs = res.bygzrs
                }).catch((error) => {
                    //console.log(error)
                });
            },
            checkerweimaheight(){
                let height = document.documentElement.clientHeight;
                if(height<475){
                    this.$refs.imgshow.style.marginTop = -0.1+'rem';
                }
            }
        }
    }
</script>

<style scoped lang="less">
    body {
        background: #f4f4f4;
    }
    .generalization {
        height: 100%;
        overflow: hidden;

        .ge_box {
            overflow: hidden;
            height: 96%;
            width: 6.9rem;
            margin: 0.3rem;
            background: url("../img/back2.png") bottom center no-repeat;
            background-size: 100% auto;
            position: relative;

            img {
                width: 65%;
                display: block;
                margin: 0.5rem auto 1.2rem;
            }

            .btm {
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: 1;
                width: 100%;
                height: 6.8rem;
                color: #fff;

                .gename {
                    text-align: center;
                    font-size: 0.48rem;
                    margin-top: 1.1rem;
                }

                .gephone {
                    text-align: center;
                    font-size: 0.36rem;
                    margin-top: 0.2rem;
                }

                .ge_list {
                    width: 6.5rem;
                    height: 0.88rem;
                    border: 1px solid #eee;
                    border-radius: 0.44rem;
                    margin: 0.3rem auto;
                    line-height: 0.88rem;

                    .iconbox {
                        float: left;
                        width: 0.9rem;
                        height: 0.9rem;
                        border-radius: 0.45rem;
                        background: #fff;
                        overflow: hidden;
                        margin: -1px;

                        img {
                            width: 0.4rem;
                            height: 0.4rem;
                            margin: 0.25rem auto;
                        }
                    }

                    .text {
                        width: 5.1rem;
                        float: left;
                        margin-left: 0.2rem;
                        font-size: 0.28rem;

                        span {
                            width: 42%;
                            float: left;
                        }

                        span:nth-child(2) {
                            width: 58%;
                        }
                    }
                }
            }
        }
    }
</style>
